﻿@using TradeFlow.Server.Language;
@{
    Layout = "_Layout";
    ViewData["Title"] = i18n.homepage;
}
<el-container>
    <avue-data-display :option="optionDisplay"></avue-data-display>
</el-container>
    <el-container>
    <avue-data-rotate :option="optionRotate"></avue-data-rotate>
</el-container>
<el-container>
    <avue-data-price :option="optionPrice"></avue-data-price>

</el-container>

@section Scripts {
    <style>
        .avue-data-display{
        width:100%;
        }

        .avue-data-rotate {
        width:100%;
        }

        .data-price {
            width: 100%;
        }
    </style>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    themeV:localStorage.getItem('themeV'),

                    optionPrice:{
                      span: 6,
                      data: [
                        {
                          title: '日套餐',
                          price: 20,
                          append: '1 / 天',
                          click: function () {
                            alert('弹窗');
                          },
                          list: ['1天的使用时间', '支持pc客户端', '支持vue的全部体系', '一个神奇的框架']
                        }, {
                          title: '周套餐',
                          price: 30,
                          append: '7 / 天',
                          click: function () {
                            alert('弹窗');
                          },
                          list: ['1天的使用时间', '支持pc客户端', '支持vue的全部体系', '一个神奇的框架']
                        }, {
                          title: '月套餐',
                          price: 40,
                          append: '30 / 天',
                          click: function () {
                            alert('弹窗');
                          },
                          list: ['1天的使用时间', '支持pc客户端', '支持vue的全部体系', '一个神奇的框架']
                        }, {
                          title: '年套餐',
                          price: 50,
                          append: '360 / 天',
                          click: function () {
                            alert('弹窗');
                          },
                          list: ['1天的使用时间', '支持pc客户端', '支持vue的全部体系', '一个神奇的框架']
                        }
                      ]
                    },
                    optionRotate:{
                      span: 8,
                      data: [
                        {
                          click: function (item) {
                            alert(JSON.stringify(item));
                          },
                          count: '150',
                          title: '新订单',
                          icon: 'el-icon-warning',
                          color: 'rgb(49, 180, 141)'
                        }, {
                          click: function (item) {
                            alert(JSON.stringify(item));
                          },
                          count: '53%',
                          title: '跳出率',
                          icon: 'el-icon-view',
                          color: '#00a65a'
                        }, {
                          click: function (item) {
                            alert(JSON.stringify(item));
                          },
                          count: '44',
                          title: '用户注册数',
                          icon: 'el-icon-setting',
                          color: '#f39c12'
                        }
                      ]
                    },
                    optionDisplay :{
                              span: 6,
                              data: [
                                {
                          click: function (item) {
                                    alert(JSON.stringify(item));
                                  },
                          count: 100,
                                  decimals: 2,
                                  title: '日活跃数',
                                      href: 'https://avuejs.com',
                                          target: '_blank'
                                        },
                                        {
                                          click: function (item) {
                                            alert(JSON.stringify(item));
                                          },
                                          count: '3,000',
                                          title: '月活跃数',
                                          color: "red",
                                          fontColor: "#000",
                                          href: 'https://avuejs.com',
                                          target: '_blank'
                                        },
                                        {
                                          click: function (item) {
                                            alert(JSON.stringify(item));
                                          },
                                          count: '20,000',
                                          title: '年活跃数',
                                          href: 'https://avuejs.com',
                                          target: '_blank'
                                        },
                                        {
                                          click: function (item) {
                                            alert(JSON.stringify(item));
                                          },
                                          count: '40,000',
                                          title: '周活跃数',
                                          href: 'https://avuejs.com',
                                          target: '_blank'
                                        }
                                      ]
                                    },
                        }
                    },
                    created() {

                    },
                    methods: {
                     // 打开对话框
                        openDialog() {
                          this.dialogVisible = true;
                        },
                        // 处理表单提交
                        handleSubmit() {
                          console.log('表单提交');
                          // 在这里执行表单提交逻辑
                          this.dialogVisible = false;
                        },
                        // 处理表单取消
                        handleCancel() {
                          console.log('表单取消');
                          this.dialogVisible = false;
                        },
                    }
                });
    </script>

}